<template>
    <Link/>
    <div id="loginPage">
      <div class="loginBoxContent">
        <div class="loginTitle">
          <div class="title-text">
            Management System
          </div>
        </div>
        <div class="loginForm">
          <el-form :model="loginInfo" :rules="rules"  ref="loginFormRef" class="formBox" auto-complete='off' size="small">
            <div>
              <el-form-item  prop="account">
                <el-input size="large" prefix-icon="User" v-model="loginInfo.account" placeholder="account"/>
              </el-form-item>
            </div>
            <div>
              <el-form-item prop="password">
                <el-input size="large" prefix-icon="Lock" v-model="loginInfo.password" type="password"
                          placeholder="password" show-password/>
              </el-form-item>
            </div>
            <div class="forget">
              <el-button type="warning" link>忘记密码?</el-button>
            </div>
            <div>
              <el-button style="width: 100%" size="large" type="primary" :loading="loginLoad" @click="onSubmit(loginFormRef)">登录
              </el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
import Link from "../background/Link.vue";

import {useRouter} from "vue-router";
import {userStore} from "../../../store/user";
import {reactive, ref} from "vue";
import {ElMessage, ElNotification, FormInstance, FormRules} from "element-plus";
import Axios from "../../../plugins/axios";
import {type} from "../../../model/type";
import {useNotifyStore} from "../../../store/notify";
import Matrix from "../background/Matrix.vue";

const router = useRouter()
const userToken = userStore()
const notify = useNotifyStore()

const account = ref('')
const password = ref('')
const loginLoad=ref(false)

const loginInfo=ref({
  account:'',
  password:''
})
const flag=ref(false)

const loginFormRef=ref<FormInstance>();

function onSubmit(formEl: FormInstance | undefined) {
    // router.push('/index/home')
    if (!formEl) return

    formEl.validate((valid)=>{
      if (valid){
        loginLoad.value=true
        Axios.post('/public/login',
            {account: loginInfo.value.account, password: loginInfo.value.password})
            .then((response) => {
              let token: type.Token = new type.Token()
              let data = response.data
              if (data.code === '0000') {
                let resp = data.data
                token.token = resp.token
                token.user = resp.user
                token.orgs=resp.orgs
                token.roles=resp.roles
                // 初始化登录状态的默认组织和角色
                token.org=token.user.orgId as number
                token.role=token.user.roleId as number

                userToken.UpdateToken(token)
                router.push('/index/home')
                if (data.msg !== '') {
                  ElNotification(
                      {
                        title: 'hello!' + ' ^_^ ' + token.user.name,
                        message: data.msg,
                        type: 'success',
                        position: 'bottom-right',
                        offset: 50
                      }
                  )
                  let message = new type.NotifyMessage()
                  message.title = 'hello!' + ' ^_^ ' + token.user.name
                  message.message = data.msg
                  message.position = 'top-right'
                  message.type = 'success'
                  message.dangerouslyUseHTMLString = false
                  notify.Message(message)
                }
                loginLoad.value=false
              }else {
                loginLoad.value=false
              }
            })
            .catch(function (params) {
              loginLoad.value=false
            })
      }else {
        if (loginInfo.value.account === '') {
          ElMessage({
            type: 'warning',
            message: '账号不能为空'
          })
        }
        if ( loginInfo.value.password === '') {
          ElMessage({
            type: 'warning',
            message: '密码不能为空'
          })
        }
        loginLoad.value=false
      }
    })
}

const AccountCheck =(rule: any, value: any, callback: any) =>{
  if (loginInfo.value.password===''){
    callback()
    return
  }
  if (value===''){
    callback(new Error("账号不能为空!"))
  }else {
    if (loginInfo.value.account!==''){
      if (!loginFormRef.value) return
      loginFormRef.value?.validateField('password')
    }
    callback()
  }
}

const PasswordCheck = (rule: any, value: any, callback: any)=> {
  if (loginInfo.value.account===''){
    callback()
    return
  }
  if (value===''){
    callback(new Error("密码不能为空!"))
  }else {
    if (loginInfo.value.password!==''){
      loginFormRef.value?.validateField('account')
    }
    callback()
  }
}

const rules=reactive<FormRules>({
  account:[{validator:AccountCheck,trigger:'blur'}],
  password:[{validator:PasswordCheck,trigger:'blur'}],
})




</script>

<style scoped>
#loginPage {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: row;
    justify-content: space-around;
    user-select: none;
}

.loginBoxContent {
    width: 400px;
    height: 400px;
    color: white;
    font-size: 30px;
    background-color: rgb(26, 22, 22, 0.3);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  margin: auto;
}

.loginTitle {
    margin-top: 10px;
    height: 10%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.loginForm {
    width: 100%;
    margin-top: 10px;
    height: 70%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.formBox {
    width: 80%;
    display: flex;
    flex-direction: column;
}

.formBox > div {
    margin-top: 10px;
}

.forget {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
</style>